<template>
    <div class="cloun-word" id='tagsList'>
         <a class="clounditem" v-for='(item, key) in clounds' :key='key' :style="{color: item.color,opacity: opacityclound ? 1 : 0, padding: item.per  + 'px'}" >{{item.text}}</a>
    </div>
</template>
<script>
  import {init, stop} from './clound.js'
  // import datajson from './data.json'
  export default {
      props: ['dataValue'],
      data() {
        return {
            clounds: [],
            opacityclound: 0,
            list: [{}]
        }
      },
      created() {
        this.getData()
        this.tempTime = []
      },
      methods: {
        getData() {
          let obj = {}
          this.datalist = []
          this.dataValue.map(item => {
            switch (item.type) {
                case '木马':
                item.color = '#31E3D6'
                break;
                case '僵尸网络':
                item.color = '#248BFC'
                break;
                case '蠕虫':
                item.color = '#1C9289'
                break;
                case '病毒':
                item.color = '#FB4B8A'
                break;
                default:
                item.color = '#FDCA86'
            }
          })

          let data = this.dataValue
          for (let i = 0; i < data.length; i++) {
              obj = {
                color: data[i].color,
                key: data[i].key,
                per: data[i].value
              }
              this.datalist.push(obj)
          }
        }
      },
      mounted() {
          // this.$ajax.get('/manoeuvre/attack/method').then(res => {
              this.datalist.slice(0, 30).forEach(v => {
                  this.clounds.push({text: v.key, per: v.per, color: v.color})
              })
              this.timer = setTimeout(() => {
                  init()
                  this.opacityclound = true
              }, 100);
          // })
          window.onresize = () => {
              stop()
              init()
          }
      },
      beforeDestroy() {
          stop()
          clearInterval(this.timer)
      }
  }
</script>
<style lang='less'>
    .cloun-word {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        a {
            position:absolute;
            top:0px;
            left:0px;
            color: #62f5e5;
            font-weight:bold;
            text-decoration:none;
            padding: 3px 6px;
            &:nth-last-of-type(2n) {
                color: #2585f3;
            }
        }
        a:hover {letter-spacing:2px; z-index: 100;}
    }
</style>

